<template>
  <div class="operation">
      <b> {{ firstOperand }} </b>
      <span> {{ operator }} </span>
      <b> {{ secondOperand }} </b>
      <span> = </span>
      <b> {{ result }}</b>
  </div>
</template>

<script>
export default {
    name: 'Operation' ,
    props: {
        firstOperand: Number ,
        operator: String ,
        secondOperand: Number
    },
    computed: {
        result(){
            let res ;
            switch( this.operator ) {
                case '+': 
                    res = this.firstOperand + this.secondOperand ;
                    break ;
                case '-': 
                    res = this.firstOperand - this.secondOperand ;
                    break ;
                case '*': 
                    res = this.firstOperand * this.secondOperand ;
                    break ;
                case '/': 
                    res = this.firstOperand / this.secondOperand ;
                    break ;
            }

            return res ;
        }
    }
}
</script>

<style>
.operation {
    margin: 15px ;
    border: 1px solid blue ;
}
</style>